<template>
  <div class="wrapper">
    <map name="map" :longitude="longitude" :latitude="latitude" class="map" :show-location="showLocation"></map>
    <div class="box">
      <div class="top">
        <div class="list1">
          <div class="left">
            <span>收货人</span>
            <span>张三</span>
          </div>
          <div class="left">
            <span>电话</span>
            <span>155****5555</span>
          </div>
        </div>
        <div class="list1">
          <!-- <span>XXXXXXXX酒店</span> -->
          <span>{{name}}</span>
          <!-- <p>确认位置</p> -->
          <i @click="getLocation">重置</i>
        </div>
        <div class="list1">
          <span>{{address}}</span>
          <!-- <span>{{}}</span> -->
        </div>
      </div>
      <button form-type="submit" class="btn" @click="preserve">保存</button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      longitude: '36',
      latitude: '116',
      showLocation: true,
      address: 'XXXXXXXX酒店',
      name: 'XXXXXXXX酒店XXXXXXXX酒店XXXXXXXX酒店'
    }
  },
  onLoad () {
    let _this = this
    wx.getLocation({
      type: 'wgs84',
      success (res) {
        _this.latitude = res.latitude
        _this.longitude = res.longitude
      }
    })
  },
  methods: {
    getLocation () {
      let _this = this
      wx.chooseLocation({
        success (res) {
          _this.longitude = res.longitude
          _this.latitude = res.latitude
          _this.address = res.address
          _this.name = res.name
        }
      })
    },
    preserve () {

    }
  }
}
</script>
<style lang="scss" scoped>
@import 'static/css/base.scss';
.wrapper{
  .map{
    width: 100%;
    height: 100vh;
  }
  .box{
    position: fixed;
    bottom: 25rpx;
    width: 690rpx;
    left: 30rpx;
    z-index: 1000;
    font-size: 28rpx;
    .top{
      padding: 30rpx;
      box-shadow:0rpx 6rpx 10rpx rgba(0,0,0,0.2);
      background: #fff;
      .list1{
        display: flex;
        justify-content: space-between;
        line-height: 90rpx;
        border-bottom: 1rpx solid #f4f4f4;
        .left{
          span{
            &:first-child{
              margin-right:20rpx;
            }
            &:last-child{
              color: #666;
            }
          }
        }
        p{
          color: #22ac38;
        }
        i{
          color: #c93742;
        }
        span{
          @extend %text-limit;
        }
      }
    }
    .btn{
      width: 690rpx;
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      border-radius: 6rpx;
      color:#fff;
      background: #22ac38;
      margin-top: 20rpx;
    }
  }
}

</style>
